<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";

interface Props {
  title?: string;
}
const props = defineProps<Props>();
</script>
<template>
  <div class="custom-upload-tip-wrapper">
    <slot>
      <el-icon>
        <Plus />
      </el-icon>
      <div class="tip-content">{{ title }}</div>
    </slot>
  </div>
</template>
<style lang="less">
.custom-upload-tip-wrapper {
  width: var(--custom-upload--width);
  height: var(--custom-upload--width);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);

  &:hover {
    border-color: var(--el-color-primary);
  }

  .tip-content {
    color: var(--el-text-color-placeholder);
    font-size: 10px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 1em;
    text-align: center;
    line-height: 1.1;
  }
}
</style>
